<template>
  <div class="test-font">
    生命周期测试(console)
    <div>msg：{{ msg }}</div>
    <button class="test-button" @click="setMsg('msg has changed')">
      修改msg
    </button>
  </div>
</template>
<script lang="ts">
/*
 beforeCreate -> 与setup并行
  created -> 与setup并行
  beforeMount -> onBeforeMount
  mounted -> onMounted
  beforeUpdate -> onBeforeUpdate
  updated -> onUpdated
  beforeUnmount -> onBeforeUnmount
  unmounted -> onUnmounted
  errorCaptured -> onErrorCaptured
  renderTracked -> onRenderTracked  （get的时候触发）
  renderTriggered -> onRenderTriggered  （set的时候触发）
 */
import {
  defineComponent,
  ref,
  onMounted,
  onUpdated,
  onRenderTracked,
  onRenderTriggered,
} from "vue";
export default defineComponent({
  setup() {
    const msg = ref("hello world");
    const setMsg = (val: string) => {
      msg.value = val;
    };
    onMounted(() => {
      console.log("onMounted");
    });

    onUpdated(() => {
      console.log("onUpdated");
    });

    onRenderTracked((event) => {
      console.log("onRenderTracked", event);
    });

    onRenderTriggered((event) => {
      console.log("onRenderTriggered", event);
    });

    return {
      msg,
      setMsg,
    };
  },
});
</script>
